<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
</head>
<style>
    body{
        margin:0;
        }
     ul{
        list-style-type:none;
        margin:0;
        padding:0;
        width:25%;
        background-color:#F1F1F1;
        position:fixed;
        height:100%;
        overflow:auto;
        }
     li a{
        display:block;
        color:#000;
        padding:8px 16px;
        text-decoration:none;

     }
    li a.active{
        background-color: #4CAF50;
        color:white;
    }
    li a:hover:not(.active){
        background-color: #555555;
        color:white;
    }
</style>
<body>
    <ul>
        <li><a class="active" href="https://www.baidu.com" >百度</a></li>
        <li><a class="drive" href="https://www.hao123.com">hao123</a></li>
        <li><a class="drive" href="https://wwwqq.com">腾讯</a></li>
        <li><a class="drive" href="https://www.ifanr.com/">ifanr爱范儿</a> </li>
    </ul>
    <div style="margin-left: 25%;padding:1px 16px;height: 1000px;">
        <h2>苹果推出一大批新 emoji，连库克也变成了表情包</h2>
        <p>
            一夜之间，苹果官网高管的照片全部被撤下，被一大群「表情包」占领。
            这不是苹果高层大换血，而是苹果为了庆祝世界表情符号日（World Emoji Day），
            将官网的领导层介绍页面上所有高管头像都换成了 Memoji 的定制表情符号。
        </p>
    </div>

</body>
</html>